<!DOCTYPE html>
<html>
	<!-- 2.新制作一个页面，要求：
	       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
	       2.2 分别实现 id,类，标签三种方式查找以上元素 -->
	<head>
		<meta charset="utf-8">
		<title>第二题页面</title>
		<style type="text/css">
			.cla1{
				width: 200px;
				height: 200px;
				border:1px blue solid;
			}
			#div2{
				width: 150px;
				height: 150px;
				border:1px red solid;
			}
			#div3{
				width: 100px;
				height: 100px;
				border:1px yellow solid;
			}
		</style>
	</head>
	<!-- 元素查找 ：id,name,classname,Tag,获取父节点和子节点 -->
	<body>
		<div id="div1" class="cla1">
			<p>one</p>
			<p>two</p>
			<p>three</p>
			<p>four</p>
			<p>five</p>
		</div>
		<div id="div2">
			<h1>图片:</h1><img src="" >
		</div>
		<div id="div3">
			<ul>
				<li>a</li>
				<li>b</li>
				<li>c</li>
			</ul>
		</div>
		<button type="button" onclick="get();">获取元素</button>
		<br/><button type="button" onclick="Mainpage();">跳转回主页面</button>
	</body>
	<script type="text/javascript">
		// 分别实现 id,类，标签三种方式查找以上元素
		function get(){
			var aa = document.getElementById('div1');
			console.log(aa);
			var bb = document.getElementsByClassName('cla1')
			console.log(bb);
			var cc = document.getElementsByTagName('ul')
			console.log(cc);
			var dd = document.getElementsByTagName('li')
			console.log(dd);
			var ee = document.getElementsByTagName('p')
			console.log(ee);
			var ff = document.getElementsByTagName('img')
			console.log(ff);
			var gg = document.getElementsByTagName('h1')
			console.log(gg);
		}
		
		function Mainpage(){
			location.href = '主页面.html';
		}
	</script>
</html>
